// Content group
.plans-features-main__group {
	& + & {
		padding-top: 19px; // popular banner height adjustment
	}

	+ .faq {
		margin-top: 20px;
	}

	&.is-jetpack-products {
		> .product-selector {
			display: flex;
			flex-flow: row wrap;

			.product-card {
				flex-basis: calc( 50% - 1em );
				&:first-child:last-child {
					@include breakpoint( '>960px' ) {
						margin-left: auto;
						margin-right: auto;
						flex-basis: 520px;
					}
				}
			}
		}
	}
}

// Required additional specificity
.plans-features-main .plans-features-main__happychat-button {
	color: var( --color-primary );
	font-weight: normal;
	padding: 0;
	text-decoration: underline;

	&:hover,
	&:focus {
		color: var( --color-primary );
	}
}

.plans-features-main__banner {
	text-align: center;
	padding: 5px 0;
}

.plans-features-main__banner-content {
	display: inline-block;
	background: var( --color-surface );
	border-radius: 3px;
	padding: 2px 12px;
	@include elevation( 2dp );

	button.is-borderless {
		color: var( --color-accent );
		text-decoration: underline;
		vertical-align: baseline;
		margin-left: 0.5em;
	}
}

// Header sub-component
.plans-features-main__header {
	margin: 0 0 16px;
	padding: 0 16px;

	@include breakpoint( '>480px' ) {
		margin-bottom: 28px;
		padding: 0 24px;
	}

	@include breakpoint( '>660px' ) {
		margin-left: auto;
		margin-right: auto;
		padding: 0;
		text-align: center;
	}
}

.plans-features-main__heading {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1;
	font-weight: 700;
	color: var( --color-text );

	@include breakpoint( '>480px' ) {
		font-size: 24px;
		font-weight: 400;
	}
}

.plans-features-main__subhead {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	color: var( --color-text-subtle );
}
